import { FC, useState, useEffect, useRef } from 'react';
import { socket } from 'config/socket'
import { useSelector } from 'store/hook'

console.log('socket:', socket)
const ChartRoom = () => {
  const chartDom:any = useRef()
  const { borkerId } = useSelector(s => s)
  const [user, setUser] = useState<any>({})
  const [arr, setArr] = useState<any>([])

  useEffect(() => {
    socket.on('enterRoom', (data:any) => {
      console.log('data:', data)
      setUser(data.user)
      setArr([data.user, ...data.arr])
    })
  }, [])




  return <div className="chart-wrapper">
    <div className="chart-header">
      <span>箭头</span>
      <span>靳院院</span>
      <span>关闭</span>
    </div>
    <div className="chart-main">

      <div className="cahrt-list-item-left">
        <span className="avatar">{user?.name}</span>
        <span className="content">{user?.msg}</span>
      </div>

      {
        arr.map((item:any) => {
          return <ul>
            <li>{item.name}: {item.val}</li>
            <li style={{color:'red'}}>机器人：{item.msg}</li>
          </ul>
        })
      }

      <div className="cahrt-list-item-right">
        <span className="avatar"></span>
        <span className="content"></span>
      </div>
    </div>

    <div className="chart-footer">
      <input ref={chartDom}/> <span onClick={() => {
         socket.emit('enterRoom', {
           id: borkerId,
           val: chartDom.current.value
         })
         chartDom.current.value = ''
      }}>发送</span>
    </div>
  </div>
}


export default ChartRoom;
